.font-style-base {
  font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
  font-size: 13px;
}

.CodeMirror {
  @extend .font-style-base;
  height: auto;
}

.CodeMirror-gutters {
  border-right: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
}

// To overwrite the gutter color under one-dark theme
.cm-s-one-dark .CodeMirror-gutter, 
.cm-s-one-dark .CodeMirror-gutters {
  border: none;
  background-color: var(--bg-secondary);
}

.CodeMirror-scroll {
  min-height: 400px;
  background: var(--bg-primary);
}

.CodeMirror-empty {
  color: #969896
}

.cm-s-github .cm-comment {
  color: #969896;
}

.cm-s-github .cm-string {
  color: #183691
}

.cm-s-github .cm-string-2 {
  color: #0086b3
}

.cm-s-github .cm-tag {
  color: #63a35c
}

.cm-s-github .cm-keyword, .cm-s-github .cm-operator {
  color: #a71d5d
}

.cm-s-github .cm-property {
  color: #333
}

.cm-s-github .cm-atom {
  color: #0086b3
}

.cm-s-github .cm-error, .cm-s-github .cm-invalidchar {
  font-style: italic;
  font-weight: 600;
  color: #bd2c00;
  text-decoration: underline
}

.cm-s-github .cm-variable-2, .cm-s-github .cm-number {
  color: #0086b3
}

@import '../../../node_modules/codemirror/lib/codemirror.css';
@import '../../../node_modules/codemirror/mode/tiddlywiki/tiddlywiki.css';
@import '../../../node_modules/codemirror/mode/tiki/tiki.css';
@import '../../../node_modules/codemirror/addon/dialog/dialog.css';
@import '../../../node_modules/codemirror/addon/fold/foldgutter.css';
@import '../../../node_modules/codemirror-one-dark-theme/one-dark.css';